<template>
    <div class="container">
        <div class="top">
            <div class="user">
                <i class="el-icon-user"></i>
                <span>在线人数：<span style="color: gray">12</span></span>
            </div>
            <div class="park">
                <i class="el-icon-location-information"></i>
                <span>停车场数量：<span style="color: gray">39</span></span>
            </div>
        </div>
        <div class="bottom">
            <baidu-map zoom="17" class="bmView" ak="N351BC5nl7qG4Ozj1kLSu5UTsx2sfuw5" center="中国河南省郑州市郑州轻工业大学科学校区">
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" showAddressBar="true"
                                autoLocation="true"></bm-geolocation>
            </baidu-map>
        </div>
    </div>
</template>

<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map'
    import bmGeolocation from 'vue-baidu-map/components/controls/Geolocation'

    export default {
        name: 'apexmic',
        data(){
          return{
              center:{
                  lng:113.51616,lat:34.81715
              }
          }
        },
        components: {
            BaiduMap, bmGeolocation
        },
    }
</script>

<style>
    .bmView {
        width: 100%;
        height: 400px;
    }

    .bottom {
        width: 100%;
        height: 400px;
    }

    .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .container > .top > * {
        margin: 20px;
    }

    .top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
    }

    .user, .park {
        width: 300px;
        height: 150px;
        background-color: gainsboro;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .user > i, .park > i {
        font-size: 70px;
        color: #409EFF;
        margin-bottom: 20px;
    }

    .user > i {
        color: #6ab04c;
    }
</style>
